<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="userDetial" id="userDetial">
<div class="col-lg-8 content" data-id="userID"></div>
<!-- 
	========================用户详细信息=========================
	 -->
	    <table class="table table-bordered table-hover">
	    <tr>
	    		<td colspan="4">
	    			<label style="font-size:20px; " class="col-lg-4 control-label">①用户详细信息</label>
	    		</td>
	    </tr>
		<tr>
			<td width="25%">
			  <label class="col-lg-4 control-label">姓名:</label>
			  </td>
	          <td width="25%">
	            <div class="col-lg-8 content" data-id="name"></div>
			</td>
				<td width="25%">
			   <label class="col-lg-4 control-label">用户名称:</label>
			   </td>
	          <td width="25%">
	            <div class="col-lg-8 content" data-id="userAccount">
	            </div>
			</td>
		</tr>
		<tr>
			<td >
			    <label class="col-lg-4 control-label">创建时间:</label>
			    </td>
	          <td >
	            <div class="col-lg-8 content" data-id="createDate">
	            </div>
			</td>
			<td >
                    <label class="col-lg-4 control-label">描述:</label>
                    </td>
	          <td >
                    <div class="col-lg-8 content" data-id="description" >
                    </div>
                </td>
		</tr>
		<tr>
			<td >
			    <label class="col-lg-4 control-label">是否可用:</label>
			    </td>
	          <td colspan="3">
	            <div class="col-lg-8">
	                <div class="col-lg-8 content" data-id="disabled" >
	                </div>
	            </div>
			</td>
		</tr>
	</table>
	<!-- 
	========================所有角色=========================
	 -->
	<table  class="table table-bordered table-hover">
		<tr>
			<td colspan="4">
		    			<label style="font-size:20px; " class="col-lg-4 control-label">②所有角色</label>
		    </td>
		</tr>
		<tr>
			<td width="25%">
			  <label class="col-lg-4 control-label">角色名称</label>
			  </td>
				<td width="25%">
			   <label class="col-lg-4 control-label">角色描述</label>
			   </td>
		</tr>
		<tr id="userDetialtoRoles"></tr>
	</table>
	<!-- 
	========================所有权限=========================
	 -->
	<table id="userDetialtoPermissions"  class="table table-bordered table-hover">
		<tr>
			<td colspan="4">
		    			<label style="font-size:20px; " class="col-lg-4 control-label">③所有权限</label>
		    </td>
		</tr>
		<tr>
			<td width="25%">
			  <label class="col-lg-4 control-label">权限名称</label>
			  </td>
				<td width="25%">
			   <label class="col-lg-4 control-label">权限描述</label>
			   </td>
		</tr>
	</table>

</div>
<script>
$(function() {
	var userId = $('.userDetial').parent().attr('data-value');
	$.get(contextPath + '/auth/user/findInfoOfUser.koala?userId='+userId).done(function(result) {
		var user = result.data;
		var userDetial = $('.userDetial');
		userDetial.find('[data-id="name"]').text(user.name);
		userDetial.find('[data-id="userAccount"]').text(user.userAccount);
		userDetial.find('[data-id="createDate"]').text(user.createDate);
		userDetial.find('[data-id="description"]').text(user.description);
		userDetial.find('[data-id="disabled"]').text(user.disabled?"不可用":"可用");
		/* ↓============迭代角色数据============↓ */
		var roles = result.data.roles;
		$.each(roles, function(){
			 var $tr = $(' <td width="25%"><div class="col-lg-4 control-label">'+this.name+'</div></td><td width="25%"><div class="col-lg-4 control-label">'+this.description+'</div></td>');
                 $tr.appendTo($("#userDetialtoRoles"));
		});
		/* ↓============迭代权限数据============↓ */
		var roles = result.data.permissions;
		$.each(roles, function(){
			 var $tr = $(' <tr><td width="25%"><div class="col-lg-4 control-label">'+this.name+'</div></td><td width="25%"><div class="col-lg-4 control-label">'+this.description+'</div></td><tr>');
                 $tr.appendTo($("#userDetialtoPermissions"));
		});
	});
});
</script>
